<template>
  <view class="card-item">
    <view class="right-level" :class="seriesTypeList[num].class" v-if="magnify">
      <image
        class="star-1"
        :src="stars"
        mode="widthFix"
        alt=""
        v-for="(star, s) in num"
        :key="s"
      />
    </view>
    <image
      class="card-br"
      :src="seriesTypeList[num].br"
      mode="widthFix"
      lazy-load
    />
    <view class="content">
      <view class="cover">
        <image
          :src="details.goods_image_text || details.goods_image"
          mode="widthFix"
          :lazy-load="true"
        />
      </view>
      <view class="info">
        <view class="title nowrap_ellipsis">
          {{ details.goods_name }}
        </view>
        <view class="price nowrap_ellipsis">
          <!-- 售价:￥{{ details.original_price }} -->
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { DRAW_TYPE } from '../extract/extract_config';
import stars from '../img/star-4.png';
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: {},
  props: {
    magnify: {
      type: Boolean,
      default: false,
    },
    details: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      stars,
      // 系列类型
      seriesTypeList: DRAW_TYPE,
    };
  },
  // 计算属性 适配者模式
  computed: {
    num() {
      return this.details.reward_level || this.details.level || 1;
    },
  },
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   * 在实例初始化之前被调用
   */
  beforeCreate() {},
  // 在实例创建完成后被立即调用
  created() {},
  // 在挂载开始之前被调用
  beforeMount() {},
  // 挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用nextTick
  mounted() {},
  // 数据更新时调用，发生在虚拟 DOM 打补丁之前
  beforeUpdate() {},
  // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
  updated() {},
  // 实例销毁之前调用。在这一步，实例仍然完全可用
  beforeDestroy() {},
  // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
  destroyed() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
.card-item {
  flex-shrink: 0;
  position: relative;
  width: 100%;
  height: 222rpx;

  .card-br {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .badge {
    position: absolute;
    top: -10rpx;
    left: -10rpx;
    width: calc(40rpx * 2.25);
    height: 40rpx;
  }
  .content {
    position: relative;
    width: 100%;
    height: calc(100% - 52rpx);
    .cover {
      margin: 0 auto;
      padding-top: 20rpx;
      box-sizing: content-box;
      width: 110rpx;
      height: 110rpx;
      overflow: hidden;
      image {
        width: 100%;
        height: 100%;
      }
    }

    .info {
      position: absolute;
      bottom: 0rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      min-height: 20%;
      padding: 2% 6% 6%;
      width: 90%;
      background: rgba(112, 78, 0, 0.16);
      .title {
        text-align: center;
        font-size: 18rpx;
        font-weight: 600;
        color: #fff;
      }
      .price {
        font-size: 17rpx;
        font-weight: bold;
        color: #fff;
      }
    }
  }
}
.right-level {
  // display: flex;
  // flex-direction: column;
  // justify-content: center;
  // align-items: center;
  position: absolute;
  left: 5%;
  top: -15rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rpx 4rpx;
  min-width: 24rpx;
  width: 90%;
  height: 26rpx;
  border-radius: 10rpx 10rpx 0 0;
  border-bottom-color: transparent !important;
  opacity: 0;
  animation: slide-in-bottom 1s linear 0.4s 1 normal forwards;

  &.z-b {
    background: rgba(255, 187, 0, 0.25);
    border: 2rpx solid #ffe977;
  }
  &.c-b {
    background: rgba(229, 58, 58, 0.25);
    border: 2rpx solid #ffbbc1;
  }
  &.o-b {
    background: rgba(229, 58, 201, 0.25);
    border: 2rpx solid #e1b7ff;
  }
  &.h-b {
    background: rgba(58, 161, 229, 0.25);
    border: 2rpx solid #c8d0e9;
  }
  &.n-b {
    background: rgba(227, 227, 227, 0.25);
    border: 2rpx solid #c8d0e9;
  }

  .star-1 {
    position: relative;
    top: 1rpx;
    width: 19rpx;
    height: 18rpx;
    transform: scale(1.2);
  }
}
@keyframes slide-in-bottom {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
</style>
